---
name: CircleShrink
route: /circle-shrink
menu: Supporting motions
---

import { Playground, Props } from 'docz';
import * as Common from '@element-motion/dev';
import { Motion } from '@element-motion/utils';
import * as Styled from './styled';
import CircleShrink from '../index';

# CircleShrink

Will animate a circle from the viewport to destination element,
and then fade out.

Generally you should use [CircleExpand](/circle-expand) and [CricleShrink](/circle-shrink) together to seamlessly transition the background between pages.

## Usage

```js
import Motion, { CircleShrink } from '@element-motion/core';
```

<Playground>
  <Common.Toggler>
    {({ shown, toggle }) =>
      shown ? (
        <Styled.Container>
          <Motion name="circle-shrink" key="1">
            {({ ref, style }) => <Styled.Button onClick={() => toggle()} style={style} ref={ref} />}
          </Motion>
        </Styled.Container>
      ) : (
        <Styled.Container onClick={() => toggle()} interactive>
          <Motion name="circle-shrink" key="2">
            <CircleShrink background={Common.colors.red}>
              {({ ref, style }) => <div style={style} ref={ref} />}
            </CircleShrink>
          </Motion>
        </Styled.Container>
      )
    }
  </Common.Toggler>
</Playground>

## Props

<Props of={CircleShrink} />
